<template>
    <view>
       <view class="title">
		<image src="../../static/one.jpg" style="width: 50upx;height: 50upx;" @click="back"></image>
        <view style="font-size: 36upx;font-weight: 800;">注册</view>
	</view> 
        <view class="center">
            <text style="font-weight: 800;font-size: 45upx;">注册</text>
        </view>
        <view class="center-down">
            <view class="show" style="display: flex;flex-direction: row;align-items: center;">
                <text>+86</text>
                <image src="../../static/down.png" mode="" style="height: 40upx;width: 65upx;margin-left: 5upx;margin-right: 5upx;"></image>
                <input  placeholder="请输入手机号码" placeholder-style="color:#999999;font-size:34upx" maxlength="11" type="number" confirm-type="next" confirm-hold="true" v-model="number" @blur="verific">
            </view>
            <view class="show">
                <input type="text" placeholder="输入密码,长度8-12位" placeholder-style="color:#999999;font-size:34upx" password="true" maxlength="12" confirm-type="next" confirm-hold="true" v-model="password"
           @blur="verificprd" >
            </view>
            <view class="show">
                <input type="text" value="" placeholder="再次输入密码" placeholder-style="color:#999999;font-size:34upx" maxlength="12" password="true" confirm-type="next" @blur="cmp" v-model="passwordagain"/>
            </view>
            <view class="show">
                <input type="text" placeholder="用户名" placeholder-style="color:#999999;font-size:34upx" confirm-type="done" v-model="username">
            </view>
        </view>
        <view style="padding-top: 100upx;padding-left: 120upx;padding-right: 120upx;"><button 
        @click="resgiter"
         style="background-color: #f5ab16;border-radius: 150upx ;height: 100upx;" ><text style="color:white;font-size: 45upx;font-weight: 800;margin: auto;">注册</text></button></view>
        <view class="" style="height: 50upx;"></view>
    </view>
	
</template>

<script>
	export default {
		data() {
			return {
				username:'',
                password:"",
                passwordagain:"",
                number:"",
                bool:true
			}
		},
		methods: {
			cmp(){
                if(this.passwordagain != this.password){
                    uni.showToast({
                        title: '请重新输入密码',
                        duration: 1500,
                        icon:"none"
                    });
                }
                
                this.bool = false;
            },
            verific(){
                
                let sign = 0;
                
                if(this.number.length != 11){
                    sign = 1;
                }
                for(let i of this.number){
                    if( i >= '0' && i <= "9"){
                        continue;
                    }else{
                        sign = 1;
                        break;
                    }
                }
                if(sign == 1){
                    uni.showToast({
                        title: '输入的格式有误',
                        duration: 1500,
                        icon:"none"
                    });
                }
            },
            verificprd(){
              if(this.password.length < 8){
                uni.showToast({
                    title: '密码长度过短',
                    duration: 1500,
                    icon:"none"
                });
              }  
            },
            resgiter(){
                
                let c = this;
                
                let {username,
                password,
                number}   = this;
                
                if(this.username == ""){
                    uni.showToast({
                        title: '请重新输入用户名',
                        duration: 1500,
                        icon:"none"
                    });
                    return;
                }
                
                console.log("6666");
                uni.request({
                    url: 'https://07cr7.live:8996/register',
                    method: 'POST',
                    data: {
                        phoneNumber:number,
                        password:password,
                        userName:username
                    },
                    sslVerify:false,
                    success: res => {
                        
                        console.log(res.data);
                        let data = res.data;
                        console.log("发送消息");
                       
                       if(data.statue == 2){
                           uni.showToast({
                               title: '该号码已经被注册',
                               duration: 1500,
                               icon:"none"
                           });
                           c.number = ''
                       }
                        
                        if(data.statue == 5){
                            uni.showToast({
                                title: '该用户名已经被使用过',
                                duration: 1500,
                                icon:"none"
                            });
                            c.username = ''
                        }
                       if(data.statue == 0){
                           uni.showToast({
                               title: '注册成功',
                               duration: 1500,
                               icon:"none"
                           });
                           uni.navigateBack({ })
                       } 
                    },
                    fail: () => {
                        console.log("连接失败");
                    },
                    complete: () => {}
                });
            },
            back(){
                uni.navigateBack({});
		}
	},
    }
</script>

<style>
    page{
        background-color: #FEFEFE;
    }
    .title{
        padding-left: 30upx;
        display: flex;
        flex-direction: row;
        padding-right: 30upx;
        padding-top: 30upx;
        align-items: center;
        margin-top: 30upx;
        
        }
       .center{
           padding-top: 150upx;
          text-align: center;
          width: 400upx;
       }
       .center-down{
           padding-right: 150upx;
           padding-left: 150upx;
       }
       .show{
           padding-top: 80upx;
           padding-bottom: 30upx;
           border-bottom: #999999 solid 2upx;
       }

</style>
